<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="operate-dialog"
        :close-on-click-modal="false"
        destroy-on-close
        :model-value="['add', 'edit'].includes(state.form.operate!)"
        draggable
        @close="state.toggleForm('')">
        <template #header>
            <div class="title">
                {{ state.form.operate === 'add' ? '添加' : '编辑' }}
            </div>
        </template>
        <el-scrollbar v-loading="state.form.loading" class="table-form-scrollbar" height="400px">
            <div :class="`operate-form ${state.form.operate}-form`" :style="{ width: '100%' }">
                <el-form
                    v-if="!state.form.loading"
                    ref="formRef"
                    :model="state.form.items"
                    :label-width="state.form.labelWidth + 'px'"
                    :rules="rules"
                    @keyup.enter="state.onSubmit(formRef)">
                    <el-form-item prop="app" label="流的应用名">
                        <el-input v-model="state.form.items!.app" placeholder="请输入流的应用名"></el-input>
                    </el-form-item>
                    <el-form-item prop="stream" label="流的名称">
                        <el-input v-model="state.form.items!.stream" placeholder="请输入流的名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="url" label="拉流地址">
                        <el-input v-model="state.form.items!.url" placeholder="请输入拉流地址"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="retry_count" label="拉流重试次数">
                                <el-input-number
                                    v-model="state.form.items!.retry_count"
                                    placeholder="请输入拉流重试次数"
                                    style="width: 100%"></el-input-number>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item prop="rtp_type" label="拉流方式">
                                <el-select v-model="state.form.items!.rtp_type" placeholder="请选择拉流方式">
                                    <el-option label="TCP" :value="0"></el-option>
                                    <el-option label="UDP" :value="1"></el-option>
                                    <el-option label="组播" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="enable_audio" label="转协议时是否开启音频">
                                <el-switch v-model="state.form.items!.enable_audio"></el-switch>
                            </el-form-item>
                        </el-col>
                      <el-col :span="12">
                        <el-form-item prop="auto_close" label="无人观看是否自动关闭流">
                          <el-switch v-model="state.form.items!.auto_close"></el-switch>
                        </el-form-item>
                      </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="{ width: '100%', textAlign: 'center' }">
                <el-button @click="state.toggleForm('')">取消</el-button>
                <el-button :loading="state.form.submitLoading" type="primary" @click="state.onSubmit(formRef)">
                    {{ state.form.operate === 'add' ? '保存' : '编辑' }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref, reactive, watch } from 'vue';
import { FormInstance, FormItemRule, UploadInstance } from 'element-plus';
import { buildValidatorData } from '@/utils/validate';
import { TableState } from '@/components/table/table';
import { VirtualVideoStreamTableDataState, VirtualVideoStreamTableDialogState } from '@/views/admin/virtualvideostream/interface';

const formRef = ref<FormInstance>();
const state = inject('state') as TableState<VirtualVideoStreamTableDataState, VirtualVideoStreamTableDialogState>;

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    app: [buildValidatorData({ name: 'required', title: '流的应用名' })],
    stream: [buildValidatorData({ name: 'required', title: '流的名称' })],
    url: [buildValidatorData({ name: 'required', title: '拉流地址' })],
});
</script>
